<template>
    <div class="changepassword">
      <!--<div class="title-bar">-->
        <!--<div class="back" @click="back"><</div>-->
        <!--<div class="title">积分管理</div>-->
      <!--</div>-->
      <input class="edt-account" placeholder="请输入账号" v-model="account" v-on:input="watchCanLogin"/>
      <input class="edt-password" placeholder="请输入原密码" v-model="oldpassword" v-on:input="watchCanLogin"/>
      <input class="edt-password" placeholder="请输入新密码" v-model="newpassword" v-on:input="watchCanLogin"/>
      <div class="login-active" @click="changePaaword" v-show="canLogin">确定</div>
      <div class="login" @click="changePaaword" v-show="!canLogin">确定</div>
      <DialogWindow
        v-if="isDialogShow"
        :content="errmsg"
        showbtncode="1"
        :onCloseClick="onDialogCloseClick"/>
    </div>
</template>

<script>
  import DialogWindow from '@/components/DialogWindow'
  import {changePassword} from '@/api/api'
    export default {
      data(){
        return{
          account:'',
          oldpassword:'',
          newpassword:'',
          canLogin:false,
          changeSuc:false,
          isDialogShow:false,
          errmsg:null
        }
      },
      components:{
        DialogWindow
      },
        name: "change-password",
      methods:{
        watchCanLogin(){
          if (this.account.length > 0 && this.oldpassword.length && this.newpassword.length){
            this.canLogin = true
          }else{
            this.canLogin = false
          }
        },
        changePaaword(){
            if (!this.canLogin){
              return
            }
            let params={
              username:this.account,
              old_password: this.oldpassword,
              password: this.newpassword
            }
          changePassword(params).then(res=>{
            if (res.code == 0){
              this.changeSuc=true
                this.isDialogShow = true
              this.errmsg='修改成功'
            }else{
              this.isDialogShow = true
              this.errmsg=res.message
            }
          })

        },
        back(){
          this.$router.back()
        },
        onDialogCloseClick () {
          this.isDialogShow=false;
          if (this.changeSuc){
            this.$router.back()
          }
        }
      }
    }
</script>

<style scoped>
  .title-bar{
    width: 100%;
    height: 44px;
    background:linear-gradient(360deg,rgba(44,45,49,1) 0%,rgba(16,16,19,1) 100%);
  }
  .back{
    float: left;
    font-size:22px;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:44px;
    text-align: center;
    padding-left: 10px;
  }
  .title{
    font-size:18px;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:44px;
    text-align: center;
  }
  .edt-account{
    width:187px;
    height:48px;
    padding-left: 24px;
    padding-right: 24px;
    border-radius:100px;
    border:1px solid;
    margin: 0 auto;
    margin-top: 56px;
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(75,79,87,1);
    line-height:48px;

  }
  .edt-password{
    width:187px;
    height:48px;
    padding-left: 24px;
    padding-right: 24px;
    border-radius:100px;
    border:1px solid;
    margin: 0 auto;
    margin-top: 16px;
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(75,79,87,1);
    line-height:48px;
  }
  .login{
    width:235px;
    height:48px;
    background:rgba(225,225,225,1);
    border-radius:100px;
    margin: 0 auto;
    margin-top: 32px;
    font-size:18px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:48px;
    text-align: center;
  }
  .forgrt-password{
    width:235px;
    height:20px;
    margin: 0 auto;
    margin-top: 8px;
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(164,164,164,1);
    line-height:20px;
    text-align: right;
  }
  .login-active{
    width:235px;
    height:48px;
    background:rgba(254,108,136,1);
    border-radius:100px;
    margin: 0 auto;
    margin-top: 32px;
    font-size:18px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:48px;
    text-align: center;
  }
</style>
